<!-- src/App.vue -->
<template>
  <div class="app">
    <aside class="sidebar">
      <Palette @add-shape="handleAddShape" />
      <SvgUploader @import-svg="handleImportSvg" />
    </aside>

    <main class="canvas-area">
      <SvgCanvas ref="canvasRef" @select-shape="handleSelectShape" />
    </main>

    <aside class="sidebar">
      <PropertyEditor v-if="selectedShape" :shape="selectedShape" @update-shape="updateShape" />
    </aside>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Palette from './components/Palette.vue'
import SvgCanvas from './components/SvgCanvas.vue'
import PropertyEditor from './components/PropertyEditor.vue'
import SvgUploader from './components/SvgUploader.vue'
import { registerShape } from './utils/shapeFactory.js'

function handleImportSvg(svgText) {
  const type = 'custom_' + Date.now()

  // 注册为图形工厂
  registerShape(type, (draw) => {
    const wrapper = draw.group().svg(svgText)
    wrapper.move(100, 100)
    return wrapper
  })

  handleAddShape(type)
}
const canvasRef = ref(null)
const selectedShape = ref(null)

function handleAddShape(type) {
  canvasRef.value.addShape(type)
}

function handleSelectShape(shape) {
  selectedShape.value = shape
}

function updateShape(attrs) {
  if (selectedShape.value) {
    canvasRef.value.updateShape(selectedShape.value.id, attrs)
  }
}
</script>

<style scoped>
.app {
  display: flex;
  height: 100vh;
}
.sidebar {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}
.canvas-area {
  flex: 1;
  border: 1px solid #ddd;
  position: relative;
}
</style>
